<template>
    <div class="sidebar">
        <!--
            default-active 活跃状态
            collapse 菜单是否收缩
        -->
        <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            :collapse="collapse"
            background-color="#334256"
            text-color="#ffffff"
            active-text-color="#20a0ff"
            router>
            <template v-for="item in items">
                <template>
                    <el-menu-item :index="item.index" :key="item.index">
                        <i :class="item.icon"></i>
                        {{item.title}}
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
import bus from "../assets/js/bus";
    export default {
        name: "TheAside",
        data(){
            return{
                //默认不为折叠
                collapse: false,
                //菜单内容
                items: [
                    {
                        icon: 'el-icon-document',
                        index: 'Info',
                        title: '系统首页'
                    },
                    {
                        icon: 'el-icon-document',
                        index: 'Consumer',
                        title: '用户管理'
                    },
                    {
                        icon: 'el-icon-document',
                        index: 'Singer',
                        title: '歌手管理'
                    },
                    {
                        icon: 'el-icon-document',
                        index: 'SongList',
                        title: '歌单管理'
                    }
                ]
            }
        },
        computed: {
            onRoutes(){
                //默认活跃的页面为 当前route的地址去掉/
                return this.$route.path.replace('/', '');
            }
        },
        created(){
            //通过Bus进行组件间的通信，来折叠侧边栏
            //接收当前侧边栏的状态
            bus.$on('collapse', msg => {
                this.collapse = msg;
            });
        }
    }
</script>

<style scoped>
    .sidebar{
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0;
        background-color: #334256;
        /*
            y轴超出范围上下滚动
        */
        overflow-y: scroll;
    }
    /* 两个样式都为true时 执行 */
    .sidebar-el-menu:not(.el-menu--collapse){
        width: 150px;
    }
    .sidebar::-webkit-scrollbar{
        width: 0;
    }
    /* ul循环的高度为100% */
    .sidebar >ul{
        height: 100%;
    }
</style>